<template>
  <div class="dashboard-container-home" style="background-color: #101e44;">
    <el-row :gutter="20" style="bottom: -50px;top: -10px">
      <el-col :span="6"><div id="global" style="width:100%;height:100%;" /></el-col>
      <el-col :span="18">
        <div id="globalRight" style="height: 40%;width: 100%;float: top;">
          <h3 style="color: wheat;margin-left: 43%;margin-top: 15px;">皮尔逊系数</h3>
          <table class="table table-bordered old-table" style="width: 80%;margin-left: 10%;">
            <thead>
              <tr>
                <td>设备名称</td>
                <td>设备温度</td>
                <td>相别</td>
                <td>环境温度</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td title="0.1643069111741793">0.1643...</td>
                <td>1</td>
                <td title="0.19308065028760543">0.1930...</td>
                <td title="0.44306654421314917">0.4430...</td>
              </tr>
            </tbody>
            <thead>
              <tr>
                <td>环境湿度</td>
                <td>风速</td>
                <td>风向</td>
                <td>间隔单元</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td title="0.19321111799026727">0.1932...</td>
                <td title="0.1931791945727218">0.1931...</td>
                <td title="0.2956173083409547">0.2956...</td>
                <td title="0.21262816713019708">0.2126...</td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6"><div id="tell" style="width:100%;height:100%;float: bottom;">
        <table class="table table-bordered" style="width: 100px;margin-left: 42%;margin-top: 43%;">
          <thead>
            <tr>
              <td>
                告警数
              </td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                0
              </td>
            </tr>
          </tbody>
        </table>
      </div></el-col>
      <el-col :span="18">
        <el-row :gutter="20" style="width: 100%;height: 300px;float: bottom;">
          <el-col :span="12">
            <div id="pre_pre" style="width: 100%;height: 100%;" />
          </el-col>
          <el-col :span="12">
            <div id="pre_pre2" style="width: 100%;height: 100%;" />
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!--    <div id="left" style="height: 100%;width: 30%;float: left">
        <div id="global" style="width:100%;height:50%;float: top;" />
        <div id="tell" style="width:100%;height:60%;float: bottom;">
          <table class="table table-bordered" style="color:wheat;width: 100px;margin-left: 42%;margin-top: 43%;">
            <thead>
              <tr>
                <td>
                  告警数
                </td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  0
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>-->
    <!--    <div id="right" style="width: 65%;height: 100%;float: right">
        <div id="globalRight" style="height: 40%;width: 100%;float: top;">
          <h3 style="color: wheat;margin-left: 43%;margin-top: 5px;">皮尔逊系数</h3>
          <table class="table table-bordered" style="color:wheat;width: 80%;margin-left: 10%;">
            <thead>
              <tr>
                <td>设备名称</td>
                <td>设备温度</td>
                <td>间隔单元</td>
                <td>相别</td>
                <td>环境温度</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>0.198255235971254</td>
                <td>1</td>
                <td>0.20419587748292</td>
                <td>0.20337114852446</td>
                <td>0.34855100066201</td>
              </tr>
            </tbody>
            <thead>
              <tr>
                <td>环境湿度</td>
                <td>风速</td>
                <td>风向</td>
                <td>负载电流</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>0.224137114910603</td>
                <td>0.224236346546858</td>
                <td>0.29779912151045</td>
                <td>0.552904406335777</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div id="pre" style="width: 100%;height: 400px;float: bottom;" />
      </div>-->
    <!--    <div id="global" style="width:100%;height:50%;float: top;"></div>
      <div id="tell" style="width:100%;height:60%;float: bottom;"></div>
      <div id="right" style="width: 65%;height: 100%;float: right"></div>-->
  </div>
</template>

<script>
import { pre, pre2 } from '@/api/power'
import { data } from '@/api/global'

export default {

  data() {
    return {
      option: {
        backgroundColor: '#101e44',
        title: {
          show: true,
          text: '预测',
          left: '15%',
          top: '10%',
          textStyle: {
            color: '#00ca95',
            fontSize: 20
          }
        },
        grid: {
          top: 100,
          containLabel: true
        },
        toolbox: {
          top: '2%',
          left: '15%',
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          show: true,
          top: '10%',
          right: '15%',
          textStyle: {
            color: '#00ca95'
          },
          data: [
            {
              name: '实际',
              icon: 'rect'
            },
            {
              name: 'LSTM',
              icon: 'rect'
            },
            {
              name: 'GRU',
              icon: 'rect'
            }
          ]
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#3B3629',
          padding: 5,
          textStyle: {
            color: '#EDF513',
            fontWeight: 'bold'
          },
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(255,255,255,0)' // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: 'rgba(255,255,255,1)' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(255,255,255,0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            formatter: '{value}',
            fontSize: 14,
            margin: 20,
            textStyle: {
              color: '#7ec7ff'
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#243753'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#243753'
            }
          },
          axisTick: {
            show: false
          },
          data: []
        },
        yAxis: {
          boundaryGap: false,
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#7ec7ff'
            }
          },
          nameTextStyle: {
            color: '#fff',
            fontSize: 12,
            lineHeight: 40
          },
          splitLine: {
            lineStyle: {
              color: '#243753'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#283352'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '实际',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: '#F0DD2D',
              borderColor: '#a3c8d8'
            },
            lineStyle: {
              normal: {
                width: 6,
                color: '#F0DD2D'
              }
            },
            areaStyle: {
              normal: {
                /* color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [{
                    offset: 0,
                    color: 'rgba(88,255,255,0.2)'
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(88,255,255,0)'
                  }
                  ],
                  false
                ) */
              }
            },
            data: [],
            type: 'line'
          },
          {
            name: 'LSTM',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: '#6f7de3',
              borderColor: '#a3c8d8'
            },
            lineStyle: {
              normal: {
                width: 6,
                color: '#6f7de3'
              }
            },
            areaStyle: {
              normal: {
                /* color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [{
                    offset: 0,
                    color: 'rgba(88,255,255,0.2)'
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(88,255,255,0)'
                  }
                  ],
                  false
                ) */
              }
            },
            data: [],
            type: 'line'
          },
          {
            name: 'GRU',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: '#48D3CC',
              borderColor: '#a3c8d8'
            },
            lineStyle: {
              normal: {
                width: 6,
                color: '#48D3CC'
              }
            },
            areaStyle: {
              normal: {
                /* color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [{
                    offset: 0,
                    color: 'rgba(88,255,255,0.2)'
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(88,255,255,0)'
                  }
                  ],
                  false
                ) */
              }
            },
            data: [],
            type: 'line'
          }
        ]
      },
      option2: {
        backgroundColor: '#101e44',
        title: {
          show: true,
          text: '预测',
          // subtext: '2021 4.1 1号主变35KV套管升高座A相',
          left: '15%',
          top: '10%',
          textStyle: {
            color: '#00ca95',
            fontSize: 20
          }
        },
        grid: {
          top: 100,
          containLabel: true
        },
        toolbox: {
          top: '2%',
          left: '15%',
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          show: true,
          top: '10%',
          right: '15%',
          textStyle: {
            color: '#00ca95'
          },
          data: [
            {
              name: '实际',
              icon: 'rect'
            },
            {
              name: 'LSTM',
              icon: 'rect'
            },
            {
              name: 'GRU',
              icon: 'rect'
            }
          ]
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#3B3629',
          padding: 5,
          textStyle: {
            color: '#EDF513',
            fontWeight: 'bold'
          },
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(255,255,255,0)' // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: 'rgba(255,255,255,1)' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(255,255,255,0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            formatter: '{value}',
            fontSize: 14,
            margin: 20,
            textStyle: {
              color: '#7ec7ff'
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#243753'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#243753'
            }
          },
          axisTick: {
            show: false
          },
          data: []
        },
        yAxis: {
          boundaryGap: false,
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#7ec7ff'
            }
          },
          nameTextStyle: {
            color: '#fff',
            fontSize: 12,
            lineHeight: 40
          },
          splitLine: {
            lineStyle: {
              color: '#243753'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#283352'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '实际',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: '#F0DD2D',
              borderColor: '#a3c8d8'
            },
            lineStyle: {
              normal: {
                width: 6,
                color: '#F0DD2D'
              }
            },
            areaStyle: {
              normal: {
                /* color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [{
                    offset: 0,
                    color: 'rgba(88,255,255,0.2)'
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(88,255,255,0)'
                  }
                  ],
                  false
                ) */
              }
            },
            data: [],
            type: 'line'
          },
          {
            name: 'LSTM',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: '#6f7de3',
              borderColor: '#a3c8d8'
            },
            lineStyle: {
              normal: {
                width: 6,
                color: '#6f7de3'
              }
            },
            areaStyle: {
              normal: {
                /* color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [{
                    offset: 0,
                    color: 'rgba(88,255,255,0.2)'
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(88,255,255,0)'
                  }
                  ],
                  false
                ) */
              }
            },
            data: [],
            type: 'line'
          },
          {
            name: 'GRU',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: '#48D3CC',
              borderColor: '#a3c8d8'
            },
            lineStyle: {
              normal: {
                width: 6,
                color: '#48D3CC'
              }
            },
            areaStyle: {
              normal: {
                /* color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [{
                    offset: 0,
                    color: 'rgba(88,255,255,0.2)'
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(88,255,255,0)'
                  }
                  ],
                  false
                ) */
              }
            },
            data: [],
            type: 'line'
          }
        ]
      },
      data,
      num1: 0,
      num2: 0
    }
  },
  watch: {
  },
  mounted() {
    this.load()
    this.drawPre()
    this.drawPre2()
    const that = this
    that.timer = setInterval(function() {
      that.num1 = that.num1 + 1
      that.num2 = that.num2 + 1
      that.drawPre()
      that.drawPre2()
    }, 1000 * 5)
  },
  methods: {
    load() {
      // document.getElementById('left').style.width = document.documentElement.clientHeight * 0.5 + 'px'
      // document.getElementById('right').style.width = document.documentElement.clientWidth - document.documentElement.clientHeight * 0.5 + 'px'

      const data = this.data
        .filter(function(dataItem) {
          return dataItem[2] > 0
        })
        .map(function(dataItem) {
          return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])]
        })
      // console.log(data);
      document.getElementById('global').style.height = document.documentElement.clientHeight * 0.4 + 'px'
      document.getElementById('global').style.width = document.documentElement.clientWidth * 0.4 + 'px'
      document.getElementById('global').style.marginLeft = '-' + document.documentElement.clientWidth * 0.08 + 'px'
      var myChart = this.$echarts.init(document.getElementById('global'))
      myChart.setOption({
        grid: {
          left: 'center',
          top: 'center'
        },
        visualMap: {
          show: false,
          min: 0,
          max: 60,
          inRange: {
            symbolSize: [1.0, 10.0]
          }
        },
        globe: {
          show: false,
          // baseTexture: "/asset/get/s/data-1491837049070-rJZtl7Y6x.jpg",
          // heightTexture: "data-gl/asset/world.topo.bathy.200401.jpg",
          globeOuterRadius: 100,
          // shading: 'color',
          displacementScale: 0.05,
          displacementQuality: 'high',
          realisticMaterial: {
            // 纹理贴图相关
            roughness: 0.7, // 材质的粗糙度  越粗糙反光度越低
            metalness: 0.5 // 金属质感 0为金属  1为非金属, 在这之间设置
          },
          viewControl: {
            autoRotate: true,
            distance: 150,
            targetCoord: [123.38, 6.09]
          },

          light: {
            // main: {
            //     intensity: 5,
            //     shadow: false
            // },
            ambient: {
              intensity: 2
            }
            // ambientCubemap: {
            //     texture: 'data-gl/asset/pisa.hdr',
            //     diffuseIntensity: 5
            // }
          }
        },
        series: [
          {
            type: 'scatter3D',
            coordinateSystem: 'globe',
            // blendMode: 'lighter',
            symbolSize: 1,
            silent: true,
            itemStyle: {
              color: '#80B8F5',
              opacity: 1
            },
            data: data
          }
        ]
      })
    },
    drawPre() {
      const param = {
        count: this.num1
      }
      pre(param).then(async res => {
        const obj = eval(res.data.data)
        // this.$message.success(res)
        this.option.xAxis.data = obj[3]
        this.option.series[0].data = obj[0]
        this.option.series[1].data = obj[1]
        this.option.series[2].data = obj[2]
        document.getElementById('pre_pre').style.height = document.documentElement.clientHeight * 0.6 + 'px'
        const myChart = this.$echarts.init(document.getElementById('pre_pre'))
        myChart.setOption(this.option)
      })
    },
    drawPre2() {
      const param = {
        count: this.num2
      }
      pre2(param).then(async res => {
        const obj = eval(res.data.data)
        // this.$message.success(res)
        this.option2.xAxis.data = obj[3]
        this.option2.series[0].data = obj[0]
        this.option2.series[1].data = obj[1]
        this.option2.series[2].data = obj[2]
        document.getElementById('pre_pre2').style.height = document.documentElement.clientHeight * 0.6 + 'px'
        const myChart2 = this.$echarts.init(document.getElementById('pre_pre2'))
        myChart2.setOption(this.option2)
      })
    }
  }
}
</script>

<style>
.table-bordered td {
  border: 1px solid #000 !important;
  text-align: center;
  padding: 10px;
}
.table{
  border-collapse: collapse;
  border-spacing: 0;
  *padd:  expression(this.cellPadding=0);
  color: orange;
}
</style>
